<template>
	<div class="login-container">
		<div class="login-info">
			<div class="title">uniCloud-admin</div>
			<div class="sub-title">系统管理后台</div>
			<div class="desc">1. 基于 vue-elementUI, uniCloud</div>
			<div class="desc">2. 基于 vue-elementUI, uniCloud</div>
			<div class="desc">3. 基于 vue-elementUI, uniCloud</div>
			<div class="desc">4. 基于 vue-elementUI, uniCloud</div>
			<div class="desc">5. 基于 vue-elementUI, uniCloud</div>
			<div class="desc">6. 基于 vue-elementUI, uniCloud</div>
		</div>
		<el-form ref="loginForm" :model="loginForm" :rules="rules" autocomplete="off" class="login-form" label-position="left">
			<div class="title-container">
				<h3 class="title">uniCloud-admin平台</h3>
			</div>
			<span>
				<el-form-item prop="username">
					<el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" autocomplete="off" name="username"
					 prefix-icon="el-icon-user" type="text" />
				</el-form-item>
				<el-form-item prop="password">
					<el-input ref="password" v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="off" name="password"
					 prefix-icon="el-icon-key" type="password" />
				</el-form-item>
				<el-form-item class="code-input" prop="code">
					<el-input ref="code" v-model="loginForm.code" placeholder="验证码" autocomplete="off" name="code" prefix-icon="el-icon-lock"
					 style="width: 70%" type="text" @keyup.enter.native="login" />
				</el-form-item>
				<img src="/static/img/code.png" alt="codeImage" class="code-image">
				<el-button :loading="loading" class="login-btn" type="primary" @click.native.prevent="login">立即登录</el-button>
			</span>
		</el-form>
		<span class="login-footer">
			<a href="https://github.com/xuxinlong001" target="_blank">© 2020 xuxinlong 版权所有</a>
		</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					code: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: {
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}
				},
				loading: false
			}
		},
		methods: {
			login() {
				this.$refs["loginForm"].validate((valid) => {
					if (valid) {
						this.loading = true
						uniCloud.callFunction({
							name: "login",
							data: this.loginForm
						}).then((res) => {
							var res = res.result
							if (res.status === 1) {
								this.$store.commit('login', res.data)
								uni.redirectTo({
									url: '/pages/index/index'
								})
								this.$message.success(res.msg)
							} else {
								this.loading = false
								this.$message.warning(res.msg)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		background: url(../../static/img/background.jpg) 50% no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;

		.login-info {
			position: absolute;
			left: 15%;
			top: 44%;
			margin-top: -100px;
			color: #fff;

			.title {
				font-size: 28px;
				font-weight: 600;
			}

			.sub-title {
				font-size: 24px;
				line-height: 30rpx;
			}

			.desc {
				font-size: 15px;
				line-height: 30px;
			}
		}

		.login-form {
			position: absolute;
			top: 50%;
			left: 70%;
			margin: -180px 0 0 -175px;
			width: 350px;
			height: 380px;
			padding: 36px;
			background: #fff;
			border-radius: 3px;
			box-sizing: border-box;

			.title-container {
				position: relative;

				.title {
					font-size: 20px;
					color: rgba(0, 0, 0, 0.85);
					margin: 0 auto 40px auto;
					text-align: center;
					font-weight: bold;
				}
			}

			.code-input {
				width: 50%;
				display: inline-block;
				vertical-align: middle;
			}

			.code-image {
				display: inline-block;
				vertical-align: top;
				cursor: pointer;
			}

			.login-btn {
				width: 100%;
			}
		}

		.login-footer {
			position: fixed;
			bottom: 16px;
			width: 100%;
			text-align: center;
			color: white;
			font-size: 14px;
			line-height: 16px;
			height: 16px;
		}

		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;

			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}


		@media screen and (max-width: 1100px) {
			.login-info {
				left: 8%;
			}
		}

		@media screen and (max-width: 970px) {
			.login-form {
				left: 50%;
			}

			.login-info {
				display: none;
			}
		}
	}
</style>
